<template>
	<view class="c_content">
		<scroll-view 
		scroll-y="true" 
		class="scroll"  
		 @scrolltolower="scrolltolower">
			<view class="c_container" v-for="(item,index) in dataList" :key="index">
				<view class="left">
					<image :src="item.images.small" mode=""></image>
				</view>
				<view class="right">
					<view class="title">{{item.title}}<text>{{item.rating.average || "即将上映"}}</text></view>
					<view>年份：{{item.year}}</view>
					<view>电影体裁：</view>
					<view class="genres" v-for="(it,idx) in item.genres" :key="idx">
						<text>{{it}}</text>
					</view>
				</view>
			</view>
			<view v-if="isShow" style="text-align: center;">
				没有更多
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import {comingSoon,newMovies,top250} from "../../apis"
	export default {
		data() {
			return {
				testList:["即将上映的电影","豆瓣电影新片榜","豆瓣电影Top250"],
				typNum:-1,
				dataList:[],
				start:0,
				isShow:false
			};
		},
		onLoad(option) {
			uni.showLoading({
			    title: '加载中',
				 mask:true
			});
			// console.log(option.title)
			// console.log(this.testList.indexOf(option.title))
			this.typNum=this.testList.indexOf(option.title)
			// console.log(this.typNum)
			this.getDataClass(this.typNum)({
				city:this.$store.state.city,
				start:"0",
				count:"10"
			}).then((res)=>{
				let [err,data]=res
				// console.log(data.data)
				this.dataList=data.data.subjects
				uni.hideLoading();
			})
			
		 },
		 methods:{
			 scrolltolower(){
				 uni.showLoading({
				     title: '加载中',
					 mask:true
				 });
				 this.start+=10;
				 // console.log(this.start)
				 this.getDataClass(this.typNum)({
				 	city:this.$store.state.city,
				 	start:this.start,
				 	count:"10"
				 }).then((res)=>{
				 	let [err,data]=res
					// console.log(data)
					let subjects=data.data.subjects
					// console.log(subjects)
				 	if(subjects.length==0){
						this.isShow=true
					}
					Array.prototype.push.apply(this.dataList,subjects)
				 	uni.hideLoading();
				 })
				 
			 },
			 getDataClass(bb){
				 // console.log(state)
				let fnList=[comingSoon,newMovies,top250]
				return fnList[bb]
				// console.log(fnList)
			 }
		 }
	}
</script>

<style lang="scss" scoped>
	.c_content{
		overflow: hidden;
		.scroll{
				height: 667*2upx;
			}
		.c_container{
			border-bottom: 1px solid #C8C7CC;
			display: flex;
			padding-top: 10px;
			padding-right: 15px;
			padding-left: 15px;
			box-shadow: 2px 1px 2px #C8C7CC;
			.left{
				width: 200upx;
				height: 250upx;
				padding-bottom: 10px;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.right{
				flex: 1;
				margin-left: 20upx;
				font-size: 16px;
				.title{
					font-size:16px;
					font-weight: 900;
					text{
						font-size:25upx;
						display: inline-block;
						float: right;
						line-height: 20px;
						text-align: center;
						color: white;
						border-radius: 5px;
						background-color: red;
						padding:2upx 6px;
					}
				}
				.genres{
					float: left;
					margin-left: 15px;
					margin-top: 5px;
				}
				
			}
		}
	}
	
	
</style>
